<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div style="width: 50%; margin: 0 auto; text-indent: 1em;">
        <img src="./butterfly.jpg" alt="" srcset="" style="float: left; margin: 10px;">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem
            placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet
            nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum,
            tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada
            et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus
            sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius
            commodo et a urna. Ut id ornare felis, eget fermentum sapien.
        </p>
        <p>
            Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est,
            posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam
            lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis
            finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in
            interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
        </p>
    </div>
    <hr>
    <div style="width: 50%; margin: 0 auto; text-indent: 1em;">
        <img src="./butterfly.jpg" alt="" srcset="" style="float: left; margin: 10px;">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem
            placerat vulputate.
        </p>
        <p style="clear: left;">
            Nam vulputate diam nec tempor bibendum.
        </p>
    </div>

</body>

</html>

<!-- 浮动 -->
<!-- https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout -->
<!-- 最初对于文本块中的浮动图像，float属性已经成为在网页上创建多个列布局的最常用工具之一。本文解释所有。 -->

<!-- 浮动 -->
<!-- https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Floats -->


<!-- float -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/float -->
<!-- float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性（与绝对定位相反）。 -->
<!-- left -->
<!-- 表明元素必须浮动在其所在的块容器左侧的关键字。 -->
<!-- right -->
<!-- 表明元素必须浮动在其所在的块容器右侧的关键字。 -->
<!-- none -->
<!-- 表明元素不进行浮动的关键字。 -->

<!-- clear -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/clear -->
<!-- clear CSS 属性指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面。clear 属性适用于浮动和非浮动元素。 -->
<!-- none -->
<!-- 元素不会向下移动清除之前的浮动。 -->
<!-- left -->
<!-- 元素被向下移动用于清除之前的左浮动。 -->
<!-- right -->
<!-- 元素被向下移动用于清除之前的右浮动。 -->
<!-- both -->
<!-- 元素被向下移动用于清除之前的左右浮动。 -->